<template>
	<view class="content">
		<view class="list">
			<scroll-view class="scroll-list" id="scroll-list" :scroll-y="true" :scroll-top="scrollTop"
				@scrolltoupper="topFn" @scroll="scrollFn">
				<view class="item-parent" id="scroll-view-content">
					<u-loadmore :status="status" marginTop="0" marginBottom="0" height="5rem"></u-loadmore>
					<view class="item" v-for="item in list" :key="item.id">
						<view class="item-right justify-end">
							<view class="main flex-col align-end">
								<view class="time">{{$util.timestampToTime(item.createTime)}}</view>
								<view class="text">
									{{item.agriculturalIssues}}
								</view>
							</view>
							<view class="avatar" @click="toSelf">
								<image class="avatarIcon" :src="userInfo.avatar||'/static/my/avatar.png'" mode="">
								</image>
							</view>
						</view>
						<view class="item-left justify-start" v-if="item.questionAnswering">
							<view class="avatar">
								<image class="avatarIcon" src="/subPages/static/my/consultation/conAvatar.png" mode="">
								</image>
							</view>
							<view class="main flex-col align-start">
								<view class="time">{{$util.timestampToTime(item.updateTime)}}</view>
								<view class="text">
									{{item.questionAnswering}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="input align-center">
			<u--input class="u-input" border="surround" v-model="value"
				:customStyle="{padding:'.5rem',margin:'0rem 1rem',height:'3rem'}"></u--input>
			<u-button class="u-button" text="发送" @click="postConsultationFn"></u-button>
		</view>
	</view>
</template>

<script>
import {getConsultationList, postConsultation, putConsultation} from '@/api/my/consultation.js'

export default {
		data() {
			return {
				value: '',
				userInfo: {},
				pageInfo: {
					pageNo: 1,
					pageSize: 10
				},
				list: [],
				scrollTop: 0,
				oldScrollTop: 0,
				firstRender: true,
				resListLen: 0,
				status: 'loading'
			}
		},
		methods: {
			scrollFn(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			topFn() {
				if (this.resListLen == this.pageInfo.pageSize) {
					this.pageInfo.pageNo++;
					this.getConsultationListFn()
				}
			},
			// 回到底部
			toBottomFn() {
				setTimeout(()=>{
					let query = uni.createSelectorQuery()
					let system = uni.getSystemInfoSync();
					query.select('#scroll-list').boundingClientRect();
					query.select('#scroll-view-content').boundingClientRect();
					query.exec((res) => {
						let top = res[1].height - res[0].height;
						if (top > 0) {
							this.scrollTop = this.oldScrollTop;
							this.$nextTick(() => {
								this.scrollTop = top;
							})
						}
					})
				},100)
			},
			// 获取数据
			async getConsultationListFn() {
				this.status = 'loading'
				let res = await getConsultationList({
					...this.pageInfo,
					userId: this.userInfo.id
				});
				this.resListLen = res.list.length
				if (this.resListLen < this.pageInfo.pageSize) {
					this.status = 'nomore'
				}
				res.list.forEach(async (v) => {
					if (v.whetherView == 1) {
						let res1 = await putConsultation({
							id: v.id,
							'whetherView': 2
						});
						if (!res1) {
							this.$util.msg('更新状态失败')
							return
						}
					}
				})
				res.list.forEach((v)=>{
					this.list.unshift(v)
				})
				if (this.firstRender) {
						this.toBottomFn()
				}
				this.firstRender = false;
			},
			toSelf() {
				uni.navigateTo({
					url: '/subPages/set/userInfo'
				})
			},
			async postConsultationFn() {
				if (!this.value) {
					this.$util.msg('发送消息不可为空')
					return
				}
				let res = await postConsultation({
					"agriculturalIssues": this.value,
					"consultant": this.userInfo.nickname,
					"questionAnswering": "",
					"respondent": "",
					"userId": this.userInfo.id,
					"whetherView": 0 // 0是未回复  1是已回复未查看  2是已回复已查看
				})
				if (res) {
					this.$util.msg('已发送问题，请等待回复')
					this.list.push({
						"agriculturalIssues": this.value,
						"consultant": this.userInfo.nickname,
						"questionAnswering": "",
						"respondent": "",
						"userId": this.userInfo.id,
						"createTimed": this.$util.timestampToTime(new Date().getTime()),
						"whetherView": 0, // 0是未回复  1是已回复未查看  2是已回复已查看
					})
					this.value = ''
					this.toBottomFn()
				} else {
					this.$util.msg('问题发送失败，请稍后重试')
				}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.getConsultationListFn();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: 1.4rem;
		color: #333;
		box-shadow: inset 0rem .2rem .4rem .1rem rgba(153, 153, 153, 0.051);

		.list {
			// #ifdef H5
			height: calc(100vh - 5rem - 44px);
			// #endif
			// #ifdef APP-PLUS
			height: calc(100vh - 5rem);

			// #endif
			.scroll-list {
				height: 100%;
				padding: 0rem 1.5rem;

				.item {
					padding-bottom: 1.5rem;

					.item-left,
					.item-right {
						padding-top: 1.5rem;

						.avatar {
							width: 3.6rem;
							height: 3.6rem;
							font-size: 1rem;
							text-align: center;

							.avatarIcon {
								width: 3.6rem;
								height: 3.6rem;
								border-radius: 50%;
								margin-top: 1rem;
							}
						}

						.main {
							padding: 0 .5rem;

							.time {
								text-align: left;
								font-size: 1rem;
								margin: .5rem 1rem;
							}

							.text {
								max-width: 25rem;
								margin: 0rem .5rem;
								padding: 1.5rem 2rem;
								border-radius: .8rem;
								box-shadow: 0rem .3rem .6rem .1rem rgba(153, 153, 153, 0.202), 0rem -0.3rem .6rem .1rem rgba(153, 153, 153, 0.102);
							}
						}
					}

					.item-right {
						.time {
							text-align: right !important;
						}

						.text {
							background: #FAFAFA;
							text-align: right;
						}
					}
				}
			}
		}

		.input {
			height: 5rem;
			box-shadow: 0rem -0.2rem .4rem .1rem rgba(153, 153, 153, 0.051);

			

			.u-button {
				width: 10rem;
				height: 3rem;
				margin: 0rem 1rem 0rem 0rem;
			}
		}
	}
</style>
